<template>
  <div class="swipeCell" :style="{height: showImage ? '100px' : '64px'}">
    <div
      class="container"
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
      ref="swipeCell"
      :style="{ transform: `translateX(${currentX}px)` }"
    >
      <div class="left-container">
        <!-- 如果传递显示如果不传不显示 -->
        <div class="checked-container" v-if="$slots['left-checked']">
          <slot name="left-checked"></slot>
        </div>
        <div class="image-container"  v-if="showImage">
          <!-- 左上角标题 -->
          <div class="title-container" v-if="$slots['left-title']">
            <slot name="left-title"> 商品标题 </slot>
          </div>
          <slot name="left-image" >
            <img
              src="https://ww4.sinaimg.cn/mw690/61d7678dgy1i0os88ntcij20w01kw7ig.jpg"
              alt="商品图片"
            />
          </slot>
        </div>
        <div class="info-container">
          <div class="title">{{ title }}</div>
          <div class="description">{{ description }}</div>
          <div class="price" v-if="showImage">¥{{ price }}</div>
          <div class="quantity">
            <slot name="quantity">x2</slot>
          </div>
        </div>
      </div>
      <div class="right-container" v-if="hasRightSlot">
        <slot name="right"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SwipeCell',
  props: {
    title: { type: String, default: '商品标题' },
    description: { type: String, default: '描述信息' },
    price: { type: [Number, String], default: 2.0 },
    quantity: { type: Number, default: 2 },
    // 是否显示图片
    showImage: { type: Boolean, default: true },
  },
  data() {
    return {
      startX: 0,
      currentX: 0,
      isDragging: false,
      rightWidth: 60,
      // 新增：记录是否发生了有效滑动
      hasMoved: false,
      // 新增：用于判断是否为点击（移动距离阈值）
      moveThreshold: 10, // 像素
    };
  },
  computed: {
    hasRightSlot() {
      return !!this.$slots.right;
    },
  },
  methods: {
    handleTouchStart(e) {
      if (!this.hasRightSlot) return;

      this.isDragging = true;
      this.hasMoved = false; // 重置移动状态
      this.startX = e.touches[0].clientX;
    },

    handleTouchMove(e) {
      if (!this.isDragging || !this.hasRightSlot) return;

      const moveX = e.touches[0].clientX;
      const diff = this.startX - moveX;

      // 判断是否发生了有效移动
      if (Math.abs(diff) > this.moveThreshold) {
        this.hasMoved = true;
        // 只有在移动时才阻止默认行为（防止页面滚动）
        e.preventDefault();
      }

      if (this.hasMoved) {
        this.currentX = Math.max(-this.rightWidth, Math.min(0, -diff));
        this.$refs.swipeCell.style.transform = `translateX(${this.currentX}px)`;
      }
    },

    handleTouchEnd() {
      if (!this.isDragging) return;
      this.isDragging = false;

      // 如果没有发生有效移动，说明是点击，直接返回，不执行滑动逻辑
      if (!this.hasMoved) {
        // 点击事件会自然冒泡，无需额外处理
        return;
      }

      // 如果发生了移动，执行滑动收起/展开逻辑
      const threshold = -this.rightWidth / 2;

      if (this.currentX <= threshold) {
        this.currentX = -this.rightWidth;
      } else {
        this.currentX = 0;
      }

      this.$refs.swipeCell.style.transition = 'transform 0.3s ease';
      this.$refs.swipeCell.style.transform = `translateX(${this.currentX}px)`;

      setTimeout(() => {
        this.$refs.swipeCell.style.transition = '';
      }, 300);
    },

    close() {
      this.currentX = 0;
      this.$refs.swipeCell.style.transition = 'transform 0.3s ease';
      this.$refs.swipeCell.style.transform = 'translateX(0)';
      setTimeout(() => {
        this.$refs.swipeCell.style.transition = '';
      }, 300);
    },
  },
};
</script>

<style lang="scss" scoped>
.swipeCell {
  width: 100%;
  height: 100px;
  background-color: #fff;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  /* 禁止内部内容选中 */
  user-select: none;
  margin-bottom: 5px;

  .container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;

    .left-container {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      padding: 0 10px;
      position: relative;
      .title-container {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 12px;
        color: #fff;
        padding: 2px 4px;
        border-radius: 4px;
        background: #ff6140;
      }

      .checked-container {
        width: 20px;
        height: 20px;
        border-radius: 50%;
      }

      .image-container {
        width: 80px;
        height: 80px;
        border-radius: 5px;
        overflow: hidden;
        flex-shrink: 0;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .info-container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 10px;

        .title {
          font-size: 14px;
          font-weight: bold;
        }

        .description {
          // 2行 超出部分省略号
          font-size: 14px;
          color: #666;
          margin: 5px 0 8px 0;
        }

        .price {
          font-size: 14px;
          color: #ff4444;
        }

        .quantity {
          align-self: flex-end;
          transform: translateY(-25px);
          font-size: 14px;
          color: #999;
        }
      }
    }

    .right-container {
      width: 60px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      background-color: #ff4949;
      color: #fff;
      font-size: 14px;
    }
  }
}
</style>
